<template>
  <div>
    <!-- 
        action： 上传图片的接口地址
        list-type：指定上传的样式为照片墙样式
        :on-preview： 点击预览会触发的钩子
        :on-remove: 点了删除触发的钩子

        el-upload默认只能使用post请求上传，而且参数名只能叫file

        那就必须保证你服务器上传的接口用的是post，而且接收文件的参数名也叫file才行
        但凡你接口不是用post，或者参数名不叫file，那都无法上传成功
        所以如果你的接口不满足这个条件，那就要自定义上传
     -->
    <el-upload
      action="https://jsonplaceholder.typicode.com/posts/"
      list-type="picture-card"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove"
      :file-list="fileList"
      :http-request="doUpload"
      :class="{ disabled: fileList.length > 0 }"
    >
      <i class="el-icon-plus"></i>
    </el-upload>
    <!-- 进度条 -->
    <el-progress
      v-if="proShow"
      style="width: 160px"
      :percentage="percent"
    ></el-progress>

    <!-- 大图预览的对话框 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
  </div>
</template>
<script>
// 导入腾讯云COS
import COS from 'cos-js-sdk-v5'
// SECRETID 和 SECRETKEY请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
var cos = new COS({
  SecretId: 'AKID9AyYu0sUt480qTr8IH3f6MZbVEkJl01q',
  SecretKey: 'fEZhaDbsysb55sQjndFclwxjHciaGjy1'
})

export default {
  name: 'ImageUpload',

  props: {
    imgUrl: {
      type: String,
    }
  },

  watch: {
    // 侦听imgUrl的改变，一旦他的值改变就修改到fileList
    // 参数1：修改后的最新值
    imgUrl (newVal) {

      this.fileList = [ { url: newVal } ]
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      // 保存图片的数组
      fileList: [],
      percent: 0,
      proShow: false
    }
  },
  methods: {
    // 点击了删除触发
    handleRemove(file, fileList) {
      // 清空保存的图片
      this.fileList = []
    },

    // file就是你上传后的文件
    handlePictureCardPreview(file) {
      // 把上传的文件地址给了dialogImageUrl变量，也就是给了img的src
      // 所以才可以显示大图
      this.dialogImageUrl = file.url
      // 让对话框显示
      this.dialogVisible = true
    },

    // 自定义上传
    // data里有个file属性，就是你选择的那个文件对象
    doUpload(data) {
      this.fileList = [{url:''}]
      // 显示出进度条
      this.proShow = true
      // 自己在这写代码，把文件传到对应的服务器
      cos.putObject(
        {
          Bucket: 'hmhr82-1306801437' /* 去腾讯云能复制 */,
          Region: 'ap-guangzhou' /* 去腾讯云能复制 */,
          Key: data.file.name /* 必须 */,
          StorageClass: 'STANDARD' /* 不要改 */,
          Body: data.file, // 上传文件对象
          // 进度的回调函数
          onProgress: (progressData) => {
            // 参数progressData里有个percent属性，就是进度，但是进度是0-1之间
            // 而进度条要的是0-100之间，所以要做*100的转换
            this.percent = progressData.percent * 100
          }
        },
        (err, data) => {
          // 不管上传成功还是失败都会调用的回调函数
          // 如果失败，err就有值，如果成功，err就为空，data就有值
          // data里面有上传后的文件地址
          //   console.log(err || data)
          if (!err) {

            const url = 'http://' + data.Location
            this.fileList = [{ url }]
            // 还要子传父
            this.$emit('update:imgUrl', url)
          }
          this.percent = 0
          // 隐藏进度条
          this.proShow = false
        }
      )
    }
  }
}
</script>


<style lang="scss" scoped>
.disabled {
  ::v-deep {
    .el-upload--picture-card {
      display: none;
    }
  }
}

::v-deep {
  .el-upload-list__item {
    transition: none !important;
  }
  .el-upload-list__item-thumbnail {
    /* 图片在方框内显示长边 */
    object-fit: scale-down !important;
  }

  .el-upload-list--picture-card {

    img {
      object-fit: cover !important;
    }
  }
}
</style>